<template>
  <div>
    <a-form @submit="orgSubmit" :form="form" style="width:70%;;margin:0px auto;">
      <a-row>
        <a-col style="margin-top:80px;margin-bottom:30px;" :sm="{ span:5 }" class="formGroupTitle">
          重置登录密码</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="手机号">
        <span class="ant-form-text" style="font-size: 18px;color:#000;">{{hidemobile}}</span>
        <a-button v-if="issend" @click="getCode">发送验证码</a-button>
        <a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="验证码">
        <a-input name="captcha" v-decorator="[
                      'captcha',
                      {rules: [{ required: true, message: '请输入验证码!' },{validator: validateverCode}],validateTrigger: 'blur'}
                    ]" placeholder="请输入验证码" />
      </a-form-item>
      <!-- <a-form-item v-bind="formItemLayout" label="安全密保问题">
        <div class="ant-form-text" >{{securityQuestion}}</div>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="安全密保答案">
        <a-input v-decorator="[
                      'securityAnswer',
                      {rules: [{ required: true, message: '请输入安全密保答案!' }]}
                    ]" placeholder="请输入安全密保答案" />
      </a-form-item> -->
      <a-row>
        <a-col style="margin-bottom:20px;" :sm="{ span:12,offset:6 }">
          <a-button htmlType="submit" type="primary" class="but_sty">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-modal title="登录密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="gologin">重新登录</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";
  import GlobalFooter from "../../layouts/GlobalFooter";
  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import api from "@/common/api";
  import { get, post } from "@/common/api";
  const ATabPane = ATabs.TabPane;

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      GlobalFooter,
      ATabPane,
      ATabs,
      AForm
    },
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        logging: false,
        error: "",
        per: false,
        login: false,
        issend: true,
        phone: false,
        hidemobile: "",
        securityQuestion: "",
        Confirm: false, //验证码验证是否成功
        emailvalue: "",
        verCode: "",
        userName: "",
        securityAnswer: "",
        memberNo: "",
        count: "",
        timer: "",
        mobileNo: "",
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 },
            md: { span: 10, offset: 1 }
          }
        }
      };
    },
    watch: {},
    computed: {},
    mounted() {
      let mobileNo = localStorage.getItem("mobileNo");
      let securityQuestion = localStorage.getItem("securityQuestion");
      let userName = localStorage.getItem("userName");
      let memberNo = localStorage.getItem("memberNo");
      if (mobileNo) {
        this.mobileNo = mobileNo;
        this.memberNo = memberNo;
        console.log(this.mobileNo);
        this.hidemobile =
          this.mobileNo.substring(0, 3) + "****" + this.mobileNo.substring(7, 11);
      }
      if (securityQuestion) {
        this.securityQuestion = securityQuestion;
      }
      if (userName) {
        this.userName = userName;
      }
    },
    methods: {
      handleChange(value) {
        console.log(value);
        let a = { "msg": "", "code": 200, "data": { "actionList5": [{ "id": 3, "createBy": null, "createTime": 1565947456000, "modifiedBy": null, "modifiedTime": 1566953521278, "remark": "室内机租赁合同过期语音提示", "validState": 2, "actionName": "【合同过期即将被停用】提示语音：“租赁合同已过期，即将停用，请提交资格续审”", "pid": 3, "locationIndex": "0", "actionType": 5 }, { "id": 4, "createBy": null, "createTime": 1565947459000, "modifiedBy": null, "modifiedTime": 1566953521278, "remark": "室内机租赁合同过期语音提示", "validState": 2, "actionName": "【合同过期卡将要被停用】提示语音：“租赁合同已过期，即将停用，请尽快处理”", "pid": 4, "locationIndex": "0", "actionType": 5 }], "actionList4": [{ "id": 6, "createBy": null, "createTime": 1561371431000, "modifiedBy": null, "modifiedTime": 1566953521322, "remark": "室内机合同即将过期语音提示", "validState": 2, "actionName": "【租赁合同即将到期】提示语音：“租赁合同即将到期，请提交资格续审”", "pid": 6, "locationIndex": "0", "actionType": 4 }], "actionList6": [{ "id": 8, "createBy": null, "createTime": 1565947476000, "modifiedBy": null, "modifiedTime": 1566953521325, "remark": "室内机租赁合同过期语音提示", "validState": 2, "actionName": "【租赁合同过期被停用】提示语音：“因租赁合同过期已停用”", "pid": 8, "locationIndex": "0", "actionType": 6 }], "actionList1": [{ "id": 5, "createBy": null, "createTime": 1565947423000, "modifiedBy": null, "modifiedTime": 1566953521279, "remark": "室内机账户余额不足语音提示", "validState": 2, "actionName": "【租金账户余额不足】提示语音：“租金账户余额不足，请尽快充值”", "pid": 5, "locationIndex": "0", "actionType": 1 }], "actionList3": [{ "id": 7, "createBy": null, "createTime": 1565947448000, "modifiedBy": null, "modifiedTime": 1566953521324, "remark": "室内机租金欠费语音提示", "validState": 2, "actionName": "【欠费时间过长被停用】提示语音：“因欠费已停用”", "pid": 7, "locationIndex": "0", "actionType": 3 }], "actionList2": [{ "id": 1, "createBy": null, "createTime": 1566832485000, "modifiedBy": null, "modifiedTime": 1566953521274, "remark": "室内机租金欠费语音提示", "validState": 2, "actionName": "【欠租】提示语音：“您已欠费x个月，请尽快缴租”", "pid": 1, "locationIndex": "0", "actionType": 2 }, { "id": 2, "createBy": null, "createTime": 1565947242000, "modifiedBy": null, "modifiedTime": 1566953521276, "remark": "室内机租金欠费语音提示", "validState": 2, "actionName": "【欠租时间过长即将被停用】提示语音：”您已欠费x个月，即将停用“", "pid": 2, "locationIndex": "0", "actionType": 2 }] } }
      },
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.issend = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.issend = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        this.sendCode()
      },
      sendCode() {
        const data = {
          mobileNo: this.mobileNo
        };
        api.SendCode(
          data,
          res => {
            if (res.code == "OK") {
            } else {
              this.issend = true;
              this.$message.warning(res.message);
            }
            console.log("res", res);
          },
          err => {
            console.log(err);
          }
        );
      },
      orgSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            // this.visible = true;
            console.log("Received values of form: ", values);
            // this.securityAnswer = values.securityAnswer;
            this.codeConfirm();
          }
        });
      },
      codeConfirm() {
        let data = {
          code: this.verCode,
          userName: this.userName,
          mobileNo: this.mobileNo,
          memberNo: this.memberNo,
          // securityQuestion: this.securityQuestion,
          // securityAnswer: this.securityAnswer
        };
        api.ForgetSubmit(
          data,
          res => {
            console.log("res", res);
            if (res.code == "OK") {
              let memberResetToken = res.data.memberResetToken;
              sessionStorage.setItem("memberResetToken", memberResetToken);
              this.$router.push("/org/passwordretrieve3");
            } else {
              console.log("res", res.message);
              this.$message.error(res.message);
            }
          },
          err => {
            console.log("err", err);
          }
        );
      },

      handleOk() {
        this.$router.push("/home");
      },
      gologin() {
        this.visible = false;
        this.$router.push("/home");
      },
      validateverCode(rule, value, callback) {
        const reg = new RegExp("^[0-9]{4,10}$");
        if (value && !reg.test(value)) {
          callback("您输入的验证码有误！");
        } else {
          this.verCode = value;
        }
        callback();
      }
    }
  };
</script>

<style lang="less" scoped>
  span {
    cursor: pointer;
  }

  .formGroupTitle {
    font-size: 20px;
    font-weight: 500;
    text-align: right;
    color: #333;
  }

  .but_sty {
    width: 20%;
  }

  input {
    width: 50%;
  }
</style>